<!-- stockSingPredict.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stock Prediction</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/echarts@5"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h1 class="mt-4">股票预测</h1><br>
            <h3 class=" center"> 明日股价、股价区间、股价走势预测</h3>
            <div id="stock-chart" style="width:100%; height:400px;"></div>
            <h3 class="center"> 涨跌幅预测</h3>
            <div id="change-chart" style="width:100%; height:400px;"></div>
        </div>
                                <a href="/stock/" class="btn btn-primary">返回主页</a>

    </div>
</div>

<script>
    const data = {{ data|safe }};
    const historical_data_length = {{ historical_data_length }};

    function createSeries(data, fieldName) {
        return {
            type: 'line',
            name: fieldName,
            data: data.map(item => item[fieldName]),
            animation: false
        };
    }

       const stock_chart = echarts.init(document.getElementById('stock-chart'));

    const stock_option = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['high', 'low', 'close']
            {#data: ['最高价', '最低价', '收盘价']#}
        },
        xAxis: {
            type: 'category',
            data: data.map(item => new Date(item.trade_date).toLocaleDateString())
        },
        yAxis: {
            type: 'value'
        },
        series: [
            createSeries(data.slice(0, historical_data_length), 'high'),
            createSeries(data.slice(0, historical_data_length), 'low'),
            createSeries(data.slice(0, historical_data_length), 'close'),
            {
                ...createSeries(data.slice(historical_data_length), 'high'),
                data: data.slice(historical_data_length).map((item, index) => [index + historical_data_length, item.high])
            },
            {
                ...createSeries(data.slice(historical_data_length), 'low'),
                data: data.slice(historical_data_length).map((item, index) => [index + historical_data_length, item.low])
            },
            {
                ...createSeries(data.slice(historical_data_length), 'close'),
                data: data.slice(historical_data_length).map((item, index) => [index + historical_data_length, item.close])
            }
        ]
    };

    stock_chart.setOption(stock_option);

    const change_chart = echarts.init(document.getElementById('change-chart'));

    const change_option = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['change']
            {#data: ['变化率']#}
        },
        xAxis: {
            type: 'category',
            data: data.map(item => new Date(item.trade_date).toLocaleDateString())
        },
        yAxis: {
            type: 'value'
        },
        series: [
            createSeries(data.slice(0, historical_data_length), 'change'),
            {
                ...createSeries(data.slice(historical_data_length), 'change'),
                data: data.slice(historical_data_length).map((item, index) => [index + historical_data_length, item.change])
            }
        ]
    };

    change_chart.setOption(change_option);

</script>

</body>
</html>

